import React, { Component } from 'react';
import { good_goodinfo } from "../uilt/api"
import { Swiper, NavBar, Space } from 'antd-mobile'
import { SearchOutline, MoreOutline } from 'antd-mobile-icons'
import {
    request_create_collect,
    request_create_uncollect,
    request_create_cartadd
} from "../store/ationCreactor"
import { connect } from "react-redux"
import "../assets/font_icon/iconfont.css"
class Details extends Component {
    state = {
        goodinfo: {}
    }
    componentDidMount() {
        good_goodinfo({ goodid: this.props.match.params.id }).then((res) => {
            console.log(res.data.goodinfo.pics);
            this.setState({
                goodinfo: res.data.goodinfo
            })
        })
    }
    collectClick() {
        let falg = this.props.collection.find((item, index) => {
            return item.id === this.state.goodinfo.id
        })
        if (falg) {
            // 已收藏就去删除
            this.props.request_uncollect(this.state.goodinfo)
        } else {
            // 收藏是添加
            this.props.request_collect(this.state.goodinfo)
        }

    }
    // 购物车添加
    cartClick() {
        this.props.request_addcart(this.state.goodinfo)
    }
    onback() {
        this.props.history.push("/index/goods")
    }
    render() {
        return (
            <div className='goodinfo'>
                {/* 顶部 */}
                <NavBar onBack={() => { this.onback() }} back='返回' right={<div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                        <MoreOutline />
                    </Space>
                </div>}>
                    <div style={{ fontSize: 18, fontWeight: 700 }}>详情页面</div>
                </NavBar>
                {/* 轮播图 */}
                <Swiper autoplay loop>
                    {
                        this.state.goodinfo.pics && this.state.goodinfo.pics.map((item, index) => {
                            return (
                                <Swiper.Item key={index} >
                                    <img src={item} alt="" className='ig' />
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                <div className="money">活动价格￥{this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value}</div>
                <div className="name">{this.state.goodinfo.brand}{this.state.goodinfo.brandEN}{this.state.goodinfo.name}</div>
                <div className="tabar">
                    <i style={{ fontSize: 32, }} onClick={() => { this.collectClick() }} className={"iconfont " + (this.props.collection.find((item, index) => {
                        return item.id === this.state.goodinfo.id
                    }) ? "active" : "")}>&#xe8c6;</i>
                    <i style={{ fontSize: 22 }} className="iconfont">&#xe624;</i>
                    <i style={{ fontSize: 28 }} onClick={() => { this.cartClick() }} className={"iconfont " + (this.props.shopcart && this.props.shopcart.find((item, index) => {
                        return item.id === this.state.goodinfo.id
                    }) ? "active" : "")}>&#xe63f;</i>
                    <div className="btn">
                        <div className="btn-left" onClick={() => { this.cartClick() }}  >加入购物车</div>
                        <div className="btn-right">立即购买</div>
                    </div>
                </div>

            </div>
        );
    }
}

export default connect(
    (state) => {
        // 负责将react组件和redux仓库绑定, 将store中的数据注入到react组件中(注入到props中). 在组件中 用 this.props.collectlist 就可以获取到 store中的收藏列表
        return {
            'collection': state.collection,
            'shopcart': state.shopcartlist
        }
    },
    (dispatch) => {
        return {
            request_collect(params) {
                dispatch(request_create_collect(params))
            },
            request_uncollect(params) {
                dispatch(request_create_uncollect(params))
            },
            request_addcart(params) {
                dispatch(request_create_cartadd(params))
            }
        }
    }
)(Details);